<template>
  <ElContainer>
    <div class="table-container">
      <div class="search-box">
        <ElInput
          v-model:modelValue="state.searchForm.nickName"
          placeholder="请输入用户名"
          :style="{ width: '200px' }"
          clearable=""
          class="ElInput_290aqtyt0c"></ElInput>
        <ElButton type="primary" icon="Search" @click="handleSearch">
          搜索</ElButton
        >
        <ElButton icon="Refresh" @click="resetSearch"> 重置</ElButton>
        <ElButton type="primary" icon="Plus" @click="handleAdd"> 新增</ElButton>
      </div>
      <ElTable
        :data="state.tableData"
        :style="{ width: '100%' }"
        :border="true"
        :show-overflow-tooltip="true"
        class="ElTable_294aqtyt0d">
        <ElTableColumn
          label="序号"
          type="index"
          width="55"
          align="center"
          header-align="center">
          <template #default="{ $index }">
            <span>
              {{
                (state.pagination.currentPage - 1) * state.pagination.pageSize +
                $index +
                1
              }}</span
            >
          </template></ElTableColumn
        >
        <ElTableColumn
          prop="id"
          label="ID"
          width="200"
          align="center"
          header-align="center"></ElTableColumn>
        <ElTableColumn
          prop="nickName"
          label="昵称"
          width="180"
          align="center"></ElTableColumn>
        <ElTableColumn
          prop="userName"
          label="用户名"
          align="center"></ElTableColumn>
        <ElTableColumn prop="status" label="状态" align="center">
          <template #default="{ row, column, $index }">
            <ElTag :type="row.status === 1 ? 'primary' : 'danger'">
              {{ row.status === 1 ? '正常' : '停用' }}</ElTag
            >
          </template></ElTableColumn
        >
        <ElTableColumn
          prop="createTime"
          label="创建时间"
          width="200"
          align="center"></ElTableColumn>
        <ElTableColumn label="操作" width="320" align="center">
          <template #default="scope">
            <ElButton
              link=""
              type="primary"
              @click="
                (...args: any[]) => click_29daqtyt0d({ scope_garx6i48 }, args)
              ">
              编辑</ElButton
            >
            <ElButton
              link=""
              type="danger"
              @click="
                (...args: any[]) => click_29faqtyt0d({ scope_garx6i48 }, args)
              ">
              删除</ElButton
            >
            <ElButton
              link=""
              type="warning"
              @click="
                (...args: any[]) => click_29haqtyt0d({ scope_garx6i48 }, args)
              ">
              重置密码</ElButton
            >
            <ElButton
              link=""
              type="primary"
              @click="
                (...args: any[]) => click_29jaqtyt0d({ scope_garx6i48 }, args)
              ">
              密钥管理</ElButton
            >
          </template></ElTableColumn
        ></ElTable
      >
      <div class="pagination-container">
        <ElPagination
          v-model:current-page="state.pagination.currentPage"
          v-model:page-size="state.pagination.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :total="state.pagination.total"
          layout="total, sizes, prev, pager, next"
          :background="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"></ElPagination>
      </div>
      <ElDialog
        v-model:modelValue="state.dialog.visible"
        :title="state.dialog.type === 'add' ? '新增用户' : '编辑用户'"
        width="500px">
        <ElForm
          ref="formRef"
          :model="state.form"
          :rules="state.rules"
          label-width="100px">
          <ElFormItem label="昵称" prop="nickName">
            <ElInput v-model:modelValue="state.form.nickName"></ElInput
          ></ElFormItem>
          <ElFormItem label="用户名" prop="userName">
            <ElInput v-model:modelValue="state.form.userName"></ElInput
          ></ElFormItem>
          <ElFormItem
            v-if="state.dialog.type === 'add'"
            label="密码"
            prop="password">
            <ElInput
              v-model:modelValue="state.form.password"
              type="password"></ElInput
          ></ElFormItem>
          <ElFormItem label="状态" prop="status">
            <ElSelect
              v-model:modelValue="state.form.status"
              placeholder="请选择状态">
              <ElOption :value="1" label="正常"></ElOption>
              <ElOption
                :value="0"
                label="停用"></ElOption></ElSelect></ElFormItem
        ></ElForm>
        <template #footer="scope_29maqtyt0d">
          <span class="dialog-footer">
            <ElButton
              @click="
                (...args: any[]) => click_29zaqtyt0d({ scope_jarx6i49 }, args)
              ">
              取消</ElButton
            >
            <ElButton type="primary" @click="handleSubmit">
              确定</ElButton
            ></span
          >
        </template></ElDialog
      >
      <ElDialog
        v-model:modelValue="state.resetPasswordDialog.visible"
        title="重置密码"
        width="400px">
        <ElForm
          ref="resetPasswordFormRef"
          :model="state.resetPasswordForm"
          :rules="state.resetPasswordRules"
          label-width="100px">
          <ElFormItem label="新密码" prop="newPassword">
            <ElInput
              v-model:modelValue="state.resetPasswordForm.newPassword"
              type="password"></ElInput
          ></ElFormItem>
          <ElFormItem label="确认密码" prop="confirmPassword">
            <ElInput
              v-model:modelValue="state.resetPasswordForm.confirmPassword"
              type="password"></ElInput></ElFormItem
        ></ElForm>
        <template #footer="scope_2a2aqtyt0d">
          <span class="dialog-footer">
            <ElButton
              @click="
                (...args: any[]) => click_2a9aqtyt0d({ scope_yarx6i49 }, args)
              ">
              取消</ElButton
            >
            <ElButton type="primary" @click="handleResetPasswordSubmit">
              确定</ElButton
            ></span
          >
        </template></ElDialog
      >
      <ElDialog
        v-model:modelValue="state.keyDialog.visible"
        :title="'密钥管理 - ' + state.keyDialog.userName"
        width="900px">
        <div class="key-management">
          <div class="key-header div_2v2aqvvfny">
            <ElButton type="primary" @click="handleAddKey"> 新增密钥</ElButton>
          </div>
          <ElTable
            :data="state.keyDialog.keys"
            :style="{ width: '100%' }"
            :border="true"
            class="ElTable_2agaqtyt0d">
            <ElTableColumn
              prop="title"
              label="标题"
              align="center"></ElTableColumn>
            <ElTableColumn
              prop="apiKey"
              label="API Key"
              show-overflow-tooltip=""
              header-align="center"></ElTableColumn>
            <ElTableColumn
              prop="createTime"
              label="创建时间"
              align="center"
              width="180"></ElTableColumn>
            <ElTableColumn
              prop="expiresTime"
              label="过期时间"
              align="center"
              width="180"></ElTableColumn>
            <ElTableColumn prop="isValid" label="状态" align="center">
              <template #default="scope">
                <span> {{ scope.row.isValid ? '有效' : '已禁用' }}</span>
              </template></ElTableColumn
            >
            <ElTableColumn label="操作" width="150" align="center">
              <template #default="scope">
                <ElButton
                  size="default"
                  :type="scope.row.isValid ? 'danger' : 'success'"
                  :link="true"
                  @click="
                    (...args: any[]) =>
                      click_2apaqtyt0d({ scope_1harx6i49 }, args)
                  ">
                  {{ scope.row.isValid ? '禁用' : '启用' }}</ElButton
                >
                <ElButton
                  size="default"
                  type="danger"
                  :link="true"
                  @click="
                    (...args: any[]) =>
                      click_2araqtyt0d({ scope_1harx6i49 }, args)
                  ">
                  删除</ElButton
                >
              </template></ElTableColumn
            ></ElTable
          >
        </div>
        <template #footer="scope_2acaqtyt0d">
          <span class="dialog-footer">
            <ElButton
              @click="
                (...args: any[]) => click_2ataqtyt0d({ scope_17arx6i49 }, args)
              ">
              关闭</ElButton
            ></span
          >
        </template></ElDialog
      >
      <ElDialog
        v-model:modelValue="state.addKeyDialog.visible"
        title="新增密钥"
        width="500px">
        <ElForm
          ref="keyFormRef"
          :model="state.keyForm"
          :rules="state.keyRules"
          label-width="100px">
          <ElFormItem label="标题" prop="title">
            <ElInput v-model:modelValue="state.keyForm.title"></ElInput
          ></ElFormItem>
          <ElFormItem label="简介" prop="intro">
            <ElInput
              v-model:modelValue="state.keyForm.intro"
              type="textarea"></ElInput
          ></ElFormItem>
          <ElFormItem label="过期时间" prop="expiresTime">
            <ElDatePicker
              v-model:modelValue="state.keyForm.expiresTime"
              type="datetime"
              placeholder="选择过期时间"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss"></ElDatePicker></ElFormItem
        ></ElForm>
        <template #footer="scope_2avaqtyt0d">
          <span class="dialog-footer">
            <ElButton
              @click="
                (...args: any[]) => click_2b4aqtyt0d({ scope_1karx6i49 }, args)
              ">
              取消</ElButton
            >
            <ElButton type="primary" @click="handleAddKeySubmit">
              确定</ElButton
            ></span
          >
        </template></ElDialog
      >
    </div></ElContainer
  >
</template>
<script lang="ts">
  // @ts-nocheck
  import { defineComponent, reactive } from 'vue';
  import {
    ElContainer,
    ElInput,
    ElButton,
    ElTable,
    ElTableColumn,
    ElTag,
    ElPagination,
    ElDialog,
    ElForm,
    ElFormItem,
    ElSelect,
    ElOption,
    ElDatePicker,
    ElMessage,
    ElMessageBox
  } from 'element-plus';
  import { useProvider } from '@vtj/renderer';
  export default defineComponent({
    name: 'User',
    components: {
      ElContainer,
      ElInput,
      ElButton,
      ElTable,
      ElTableColumn,
      ElTag,
      ElPagination,
      ElDialog,
      ElForm,
      ElFormItem,
      ElSelect,
      ElOption,
      ElDatePicker
    },
    setup(props) {
      const provider = useProvider({ id: '2aqf1lnh', version: '1759116941212' });
      const state = reactive({
        loading: false,
        tableData: [],
        searchForm: { userName: '', nickName: '' },
        pagination: { currentPage: 1, pageSize: 10, total: 0 },
        dialog: { visible: false, type: 'add' },
        form: { id: '', nickName: '', userName: '', password: '', status: 1 },
        rules: {
          nickName: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
          userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
          status: [{ required: true, message: '请选择状态', trigger: 'change' }]
        },
        resetPasswordDialog: { visible: false, userId: '' },
        resetPasswordForm: { id: '', newPassword: '', confirmPassword: '' },
        resetPasswordRules: {
          newPassword: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
            { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
          ],
          confirmPassword: [
            { required: true, message: '请确认密码', trigger: 'blur' },
            {
              validator: (rule, value, callback) => {
                if (value !== state.resetPasswordForm.newPassword) {
                  callback(new Error('两次输入的密码不一致'));
                } else {
                  callback();
                }
              },
              trigger: 'blur'
            }
          ]
        },
        keyDialog: { visible: false, userId: '', userName: '', keys: [] },
        addKeyDialog: { visible: false },
        keyForm: { title: '', intro: '', expiresTime: '', loginId: '' },
        keyRules: {
          title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
          expiresTime: [
            { required: true, message: '请选择过期时间', trigger: 'change' }
          ]
        }
      });
      return { state, props, provider, ElMessage, ElMessageBox };
    },
    methods: {
      async getSystemUserList(...args) {
        // DataSource: eyJyZWYiOiIzZmFtNDl5cDMiLCJuYW1lIjoiZ2V0U3lzdGVtVXNlckxpc3QiLCJ0ZXN0Ijp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIoKSA9PlxuICB0aGlzLnJ1bkFwaSh7XG4gICAgLyog5Zyo6L+Z6YeM5Y+v6L6T5YWl5o6l5Y+j5Y+C5pWwICAqL1xuICB9KSJ9LCJ0eXBlIjoiYXBpIiwibGFiZWwiOiLojrflj5blupTnlKjliJfooagiLCJ0cmFuc2Zvcm0iOnsidHlwZSI6IkpTRnVuY3Rpb24iLCJ2YWx1ZSI6IihyZXMpID0+IHtcbiAgcmV0dXJuIHJlcztcbn0ifSwibW9ja1RlbXBsYXRlIjp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIocmVxKSA9PiB7XG4gIHJldHVybiB7XG4gICAgY29kZTogMCxcbiAgICBkYXRhOiBudWxsXG4gIH07XG59In19
        return await this.provider.apis['3fam49yp3']
          .apply(this, args)
          .then((res) => {
            return res;
          });
      },
      async putSystemUser(...args) {
        // DataSource: eyJyZWYiOiIya2FtNDl5cDMiLCJuYW1lIjoicHV0U3lzdGVtVXNlciIsInRlc3QiOnsidHlwZSI6IkpTRnVuY3Rpb24iLCJ2YWx1ZSI6IigpID0+XG4gIHRoaXMucnVuQXBpKHtcbiAgICAvKiDlnKjov5nph4zlj6/ovpPlhaXmjqXlj6Plj4LmlbAgICovXG4gIH0pIn0sInR5cGUiOiJhcGkiLCJsYWJlbCI6IuS/ruaUueW6lOeUqCIsInRyYW5zZm9ybSI6eyJ0eXBlIjoiSlNGdW5jdGlvbiIsInZhbHVlIjoiKHJlcykgPT4ge1xuICByZXR1cm4gcmVzO1xufSJ9LCJtb2NrVGVtcGxhdGUiOnsidHlwZSI6IkpTRnVuY3Rpb24iLCJ2YWx1ZSI6IihyZXEpID0+IHtcbiAgcmV0dXJuIHtcbiAgICBjb2RlOiAwLFxuICAgIGRhdGE6IG51bGxcbiAgfTtcbn0ifX0=
        return await this.provider.apis['2kam49yp3']
          .apply(this, args)
          .then((res) => {
            return res;
          });
      },
      async postSystemUser(...args) {
        // DataSource: eyJyZWYiOiIybGFtNDl5cDMiLCJuYW1lIjoicG9zdFN5c3RlbVVzZXIiLCJ0ZXN0Ijp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIoKSA9PlxuICB0aGlzLnJ1bkFwaSh7XG4gICAgLyog5Zyo6L+Z6YeM5Y+v6L6T5YWl5o6l5Y+j5Y+C5pWwICAqL1xuICB9KSJ9LCJ0eXBlIjoiYXBpIiwibGFiZWwiOiLmlrDlop7lupTnlKgiLCJ0cmFuc2Zvcm0iOnsidHlwZSI6IkpTRnVuY3Rpb24iLCJ2YWx1ZSI6IihyZXMpID0+IHtcbiAgcmV0dXJuIHJlcztcbn0ifSwibW9ja1RlbXBsYXRlIjp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIocmVxKSA9PiB7XG4gIHJldHVybiB7XG4gICAgY29kZTogMCxcbiAgICBkYXRhOiBudWxsXG4gIH07XG59In19
        return await this.provider.apis['2lam49yp3']
          .apply(this, args)
          .then((res) => {
            return res;
          });
      },
      async putSystemUserResetPassword(...args) {
        // DataSource: eyJyZWYiOiIybWFtNDl5cDMiLCJuYW1lIjoicHV0U3lzdGVtVXNlclJlc2V0UGFzc3dvcmQiLCJ0ZXN0Ijp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIoKSA9PlxuICB0aGlzLnJ1bkFwaSh7XG4gICAgLyog5Zyo6L+Z6YeM5Y+v6L6T5YWl5o6l5Y+j5Y+C5pWwICAqL1xuICB9KSJ9LCJ0eXBlIjoiYXBpIiwibGFiZWwiOiLph43nva7lr4bnoIEiLCJ0cmFuc2Zvcm0iOnsidHlwZSI6IkpTRnVuY3Rpb24iLCJ2YWx1ZSI6IihyZXMpID0+IHtcbiAgcmV0dXJuIHJlcztcbn0ifSwibW9ja1RlbXBsYXRlIjp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIocmVxKSA9PiB7XG4gIHJldHVybiB7XG4gICAgY29kZTogMCxcbiAgICBkYXRhOiBudWxsXG4gIH07XG59In19
        return await this.provider.apis['2mam49yp3']
          .apply(this, args)
          .then((res) => {
            return res;
          });
      },
      async putApiKeyDataUpdate(...args) {
        // DataSource: eyJyZWYiOiIycmFtNDl5cDMiLCJuYW1lIjoicHV0QXBpS2V5RGF0YVVwZGF0ZSIsInRlc3QiOnsidHlwZSI6IkpTRnVuY3Rpb24iLCJ2YWx1ZSI6IigpID0+XG4gIHRoaXMucnVuQXBpKHtcbiAgICAvKiDlnKjov5nph4zlj6/ovpPlhaXmjqXlj6Plj4LmlbAgICovXG4gIH0pIn0sInR5cGUiOiJhcGkiLCJsYWJlbCI6IuabtOaWsEFQSSBLZXnmlbDmja4iLCJ0cmFuc2Zvcm0iOnsidHlwZSI6IkpTRnVuY3Rpb24iLCJ2YWx1ZSI6IihyZXMpID0+IHtcbiAgcmV0dXJuIHJlcztcbn0ifSwibW9ja1RlbXBsYXRlIjp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIocmVxKSA9PiB7XG4gIHJldHVybiB7XG4gICAgY29kZTogMCxcbiAgICBkYXRhOiBudWxsXG4gIH07XG59In19
        return await this.provider.apis['2ram49yp3']
          .apply(this, args)
          .then((res) => {
            return res;
          });
      },
      async postApiKeyDataCreate(...args) {
        // DataSource: eyJyZWYiOiIzZWFtNDl5cDMiLCJuYW1lIjoicG9zdEFwaUtleURhdGFDcmVhdGUiLCJ0ZXN0Ijp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIoKSA9PlxuICB0aGlzLnJ1bkFwaSh7XG4gICAgLyog5Zyo6L+Z6YeM5Y+v6L6T5YWl5o6l5Y+j5Y+C5pWwICAqL1xuICB9KSJ9LCJ0eXBlIjoiYXBpIiwibGFiZWwiOiLliJvlu7rmlrDnmoRBUEkgS2V55pWw5o2uIiwidHJhbnNmb3JtIjp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIocmVzKSA9PiB7XG4gIHJldHVybiByZXM7XG59In0sIm1vY2tUZW1wbGF0ZSI6eyJ0eXBlIjoiSlNGdW5jdGlvbiIsInZhbHVlIjoiKHJlcSkgPT4ge1xuICByZXR1cm4ge1xuICAgIGNvZGU6IDAsXG4gICAgZGF0YTogbnVsbFxuICB9O1xufSJ9fQ==
        return await this.provider.apis['3eam49yp3']
          .apply(this, args)
          .then((res) => {
            return res;
          });
      },
      async deleteSystemUserId(...args) {
        // DataSource: eyJyZWYiOiIzb2FtNDl5cDMiLCJuYW1lIjoiZGVsZXRlU3lzdGVtVXNlcklkIiwidGVzdCI6eyJ0eXBlIjoiSlNGdW5jdGlvbiIsInZhbHVlIjoiKCkgPT5cbiAgdGhpcy5ydW5BcGkoe1xuICAgIC8qIOWcqOi/memHjOWPr+i+k+WFpeaOpeWPo+WPguaVsCAgKi9cbiAgfSkifSwidHlwZSI6ImFwaSIsImxhYmVsIjoi5Yig6Zmk5bqU55SoIiwidHJhbnNmb3JtIjp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIocmVzKSA9PiB7XG4gIHJldHVybiByZXM7XG59In0sIm1vY2tUZW1wbGF0ZSI6eyJ0eXBlIjoiSlNGdW5jdGlvbiIsInZhbHVlIjoiKHJlcSkgPT4ge1xuICByZXR1cm4ge1xuICAgIGNvZGU6IDAsXG4gICAgZGF0YTogbnVsbFxuICB9O1xufSJ9fQ==
        return await this.provider.apis['3oam49yp3']
          .apply(this, args)
          .then((res) => {
            return res;
          });
      },
      async getApiKeyDataList(...args) {
        // DataSource: eyJyZWYiOiIzbmFtNDl5cDMiLCJuYW1lIjoiZ2V0QXBpS2V5RGF0YUxpc3QiLCJ0ZXN0Ijp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIoKSA9PlxuICB0aGlzLnJ1bkFwaSh7XG4gICAgLyog5Zyo6L+Z6YeM5Y+v6L6T5YWl5o6l5Y+j5Y+C5pWwICAqL1xuICB9KSJ9LCJ0eXBlIjoiYXBpIiwibGFiZWwiOiLojrflj5ZBUEkgS2V55pWw5o2u5YiX6KGoIiwidHJhbnNmb3JtIjp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIocmVzKSA9PiB7XG4gIHJldHVybiByZXM7XG59In0sIm1vY2tUZW1wbGF0ZSI6eyJ0eXBlIjoiSlNGdW5jdGlvbiIsInZhbHVlIjoiKHJlcSkgPT4ge1xuICByZXR1cm4ge1xuICAgIGNvZGU6IDAsXG4gICAgZGF0YTogbnVsbFxuICB9O1xufSJ9fQ==
        return await this.provider.apis['3nam49yp3']
          .apply(this, args)
          .then((res) => {
            return res;
          });
      },
      async deleteApiKeyDataDelete(...args) {
        // DataSource: eyJyZWYiOiIzcmFtNDl5cDMiLCJuYW1lIjoiZGVsZXRlQXBpS2V5RGF0YURlbGV0ZSIsInRlc3QiOnsidHlwZSI6IkpTRnVuY3Rpb24iLCJ2YWx1ZSI6IigpID0+XG4gIHRoaXMucnVuQXBpKHtcbiAgICAvKiDlnKjov5nph4zlj6/ovpPlhaXmjqXlj6Plj4LmlbAgICovXG4gIH0pIn0sInR5cGUiOiJhcGkiLCJsYWJlbCI6IuWIoOmZpEFQSSBLZXnmlbDmja4iLCJ0cmFuc2Zvcm0iOnsidHlwZSI6IkpTRnVuY3Rpb24iLCJ2YWx1ZSI6IihyZXMpID0+IHtcbiAgcmV0dXJuIHJlcztcbn0ifSwibW9ja1RlbXBsYXRlIjp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIocmVxKSA9PiB7XG4gIHJldHVybiB7XG4gICAgY29kZTogMCxcbiAgICBkYXRhOiBudWxsXG4gIH07XG59In19
        return await this.provider.apis['3ram49yp3']
          .apply(this, args)
          .then((res) => {
            return res;
          });
      },
      click_29daqtyt0d({ scope_garx6i48 }, args) {
        return (($event) => {
          this.handleEdit(scope.row);
        }).apply(this, args);
      },
      click_29faqtyt0d({ scope_garx6i48 }, args) {
        return (($event) => {
          this.handleDelete(scope.row);
        }).apply(this, args);
      },
      click_29haqtyt0d({ scope_garx6i48 }, args) {
        return (($event) => {
          this.handleResetPassword(scope.row);
        }).apply(this, args);
      },
      click_29jaqtyt0d({ scope_garx6i48 }, args) {
        return (($event) => {
          this.handleManageKeys(scope.row);
        }).apply(this, args);
      },
      click_29zaqtyt0d({ scope_jarx6i49 }, args) {
        return (() => {
          this.state.dialog.visible = false;
        }).apply(this, args);
      },
      click_2a9aqtyt0d({ scope_yarx6i49 }, args) {
        return (() => {
          this.state.resetPasswordDialog.visible = false;
        }).apply(this, args);
      },
      click_2apaqtyt0d({ scope_1harx6i49 }, args) {
        return (($event) => {
          this.handleToggleKeyStatus(scope.row);
        }).apply(this, args);
      },
      click_2araqtyt0d({ scope_1harx6i49 }, args) {
        return (($event) => {
          this.handleDeleteKey(scope.row);
        }).apply(this, args);
      },
      click_2ataqtyt0d({ scope_17arx6i49 }, args) {
        return (() => {
          this.state.keyDialog.visible = false;
        }).apply(this, args);
      },
      click_2b4aqtyt0d({ scope_1karx6i49 }, args) {
        return (() => {
          this.state.addKeyDialog.visible = false;
        }).apply(this, args);
      },
      async fetchUserList() {
        this.state.loading = true;
        try {
          const { data } = await this.getSystemUserList({
            pageNum: this.state.dictTypePage,
            pageSize: this.state.dictTypePageSize,
            nickName: this.state.searchForm.nickName
          });
          this.state.tableData = data.list;
          this.state.pagination.total = data.total;
          this.state.loading = false;
        } catch (error) {
          console.error('获取用户列表失败:', error);
          ElMessage.error('获取用户列表失败');
          this.state.loading = false;
        }
      },
      handleSearch() {
        this.state.pagination.currentPage = 1;
        this.fetchUserList();
      },
      resetSearch() {
        this.state.searchForm.userName = '';
        this.handleSearch();
      },
      handleAdd() {
        this.state.dialog.type = 'add';
        this.state.dialog.visible = true;
        this.state.form = {
          id: '',
          nickName: '',
          userName: '',
          password: '',
          status: 1
        };
      },
      handleEdit(row) {
        this.state.dialog.type = 'edit';
        this.state.dialog.visible = true;
        this.state.form = { ...row, password: '' };
      },
      async handleDelete(row) {
        try {
          await ElMessageBox.confirm('确认要删除该用户吗？', '提示', {
            type: 'warning'
          });
          const id = row.id;
          await this.deleteSystemUserId(null, { params: { id } });
          ElMessage.success('删除成功');
          this.fetchUserList();
        } catch (error) {
          if (error !== 'cancel') {
            ElMessage.error('删除用户失败');
          }
        }
      },
      async handleSubmit() {
        if (!this.$refs.formRef) return;
        await this.$refs.formRef.validate(async (valid) => {
          if (valid) {
            try {
              if (this.state.dialog.type === 'add') {
                await this.postSystemUser(this.state.form);
              } else {
                await this.putSystemUser(this.state.form);
              }
              ElMessage.success(
                this.state.dialog.type === 'add' ? '新增成功' : '更新成功'
              );
              this.state.dialog.visible = false;
              this.fetchUserList();
            } catch (error) {
              ElMessage.error('保存用户失败');
            }
          }
        });
      },
      handleResetPassword(row) {
        this.state.resetPasswordDialog.visible = true;
        this.state.resetPasswordDialog.userId = row.id;
        this.state.resetPasswordForm = { newPassword: '', confirmPassword: '' };
      },
      async handleResetPasswordSubmit() {
        if (!this.$refs.resetPasswordFormRef) return;
        await this.$refs.resetPasswordFormRef.validate(async (valid) => {
          if (valid) {
            try {
              this.state.resetPasswordForm.id =
                this.state.resetPasswordDialog.userId;
              this.state.resetPasswordForm.password =
                this.state.resetPasswordForm.newPassword;
              await this.putSystemUserResetPassword(this.state.resetPasswordForm);
              ElMessage.success('密码重置成功');
              this.state.resetPasswordDialog.visible = false;
            } catch (error) {
              ElMessage.error('密码重置失败');
            }
          }
        });
      },
      async handleManageKeys(row) {
        this.state.keyDialog.visible = true;
        this.state.keyDialog.userId = row.id;
        this.state.keyDialog.userName = row.userName;
        await this.fetchKeyList();
      },
      handleAddKey() {
        this.state.addKeyDialog.visible = true;
        this.state.keyForm = {
          title: '',
          intro: '',
          expiresTime: '',
          loginId: this.state.keyDialog.userId
        };
      },
      async handleAddKeySubmit() {
        if (!this.$refs.keyFormRef) return;
        await this.$refs.keyFormRef.validate(async (valid) => {
          if (valid) {
            try {
              await this.postApiKeyDataCreate(this.state.keyForm);
              ElMessage.success('密钥创建成功');
              this.state.addKeyDialog.visible = false;
              await this.fetchUserList();
            } catch (error) {
              ElMessage.error('密钥创建失败');
            }
          }
        });
      },
      async handleToggleKeyStatus(key) {
        try {
          await ElMessageBox.confirm(
            `确认要${key.isValid ? '禁用' : '启用'}该密钥吗？`,
            '提示',
            { type: 'warning' }
          );
          key.isValid = !key.isValid;
          await this.putApiKeyDataUpdate(key);
          ElMessage.success(`${key.isValid ? '启用' : '禁用'}成功`);
          await this.fetchKeyList();
        } catch (error) {
          if (error !== 'cancel') {
            ElMessage.error(`${key.isValid ? '禁用' : '启用'}失败`);
          }
        }
      },
      async handleDeleteKey(key) {
        try {
          await ElMessageBox.confirm('确认要删除该密钥吗？', '提示', {
            type: 'warning'
          });
          await this.deleteApiKeyDataDelete(null, { params: { id: key.id } });
          ElMessage.success('删除成功');
          await this.fetchKeyList();
        } catch (error) {
          if (error !== 'cancel') {
            ElMessage.error('删除失败');
          }
        }
      },
      handleSizeChange(val) {
        this.state.pagination.pageSize = val;
        this.fetchUserList();
      },
      handleCurrentChange(val) {
        this.state.pagination.currentPage = val;
        this.fetchUserList();
      },
      async fetchKeyList() {
        const { data } = await this.getApiKeyDataList({
          loginId: this.state.keyDialog.userId
        });
        this.state.keyDialog.keys = data;
      }
    },
    async mounted() {
      await this.fetchUserList();
    }
  })
</script>
<style lang="css" scoped>
  .table-container {
    padding: 20px;
    width: 100%;
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
  }
  .search-box {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
  }
  :deep(.el-table) {
    flex: 1;
    height: 100%;
  }
  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
  :deep(.el-button) {
    margin-left: 10px;
  }
  .key-management-header {
    margin-bottom: 20px;
  }
  .status-valid {
    color: #67c23a;
  }
  .status-invalid {
    color: #f56c6c;
  }
  :deep(.el-dialog__body) {
    padding-top: 10px;
  }

  .div_2v2aqvvfny {
    margin-bottom: 10px;
  }
</style>
